<template>
	<view class="loginBody">
		<view class="back">
			<view class="logo">
				<image src="@/static/images/logo.png" alt="" />
			</view>
			<view class="form">
				<!-- 手机号一键登录 -->
				<div v-if="oneClickLoginShow">
					<view class="phoneNumber">
						<span>{{ formatPhoneNumber(phoneNumber) }}</span>
						<!-- <u-tag text="switch" type="info" @click="handSwitch"></u-tag> -->
					</view>
					<div class="logBtn phone">
						<u-button type="" text="一键登录" @click="phoneLogin" :loading="phoneLoginLoading"
							:loadingText="'一键登录'"></u-button>
					</div>
				</div>
				<!-- 手机/邮箱登录 -->
				<div class="Captcha" v-if="numberLoginShow">
					<!-- <div class="up">
						<up-subsection activeColor="#000" inactiveColor="#fff" bgColor="#DE868F" :list="subsectionList"
							:current="subsectionCurrent" @change="sectionChange">
						</up-subsection>
					</div> -->
					<div class="phoneFrom">
						<up-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
							<up-form-item v-if="subsectionCurrent === 0" class="phoneNumber1" label=""
								prop="userInfo.number" borderBottom ref="item1">
								<u-input type="number" v-model="model1.userInfo.number" placeholder="请输入手机号"
									style="flex: 1;" @input="handlePhoneInput"></u-input>
							</up-form-item>
							<up-form-item v-else class="phoneNumber1" label="" prop="userInfo.email" borderBottom
								ref="item1">
								<u-input type="text" v-model="model1.userInfo.email" placeholder="请输入邮箱号"
									style="flex: 1;" @input="handlePhoneInput"></u-input>
							</up-form-item>
							<up-form-item class="sendCode1" label="" prop="userInfo.sendCode" borderBottom ref="item1">
								<u-input v-model="model1.userInfo.sendCode" placeholder="请输入验证码"
									style="flex: 1;"></u-input>
								<u-button style="width: 160rpx;" :disabled="isDisabled" @click="handSendCode"
									:loading="SendCodeLoading" :loadingText="buttonText">{{
										buttonText }}</u-button>
							</up-form-item>
						</up-form>
						<div class="logBtn">
							<u-button type="" text="登录" @click="phoneFromLogin" :loading="phoneFromLoginLoading"
								:loadingText="'登录'"></u-button>
							<div class="btn2">
								<u-button v-if="subsectionCurrent === 0" type="" text="使用邮箱登录"
									@click="useEmail"></u-button>
								<u-button v-else type="" text="使用手机号登录" @click="usePhome"></u-button>
							</div>
						</div>
					</div>
				</div>
				<!-- 账号密码登录 -->
				<div class="account" v-if="accountLoginShow">
					<up-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
						<up-form-item class="phoneNumber2" label="" prop="codeInfo.number" borderBottom ref="item1">
							<u-input v-model="model1.codeInfo.number" placeholder="请输入账号" style="flex: 1;"></u-input>
						</up-form-item>
						<up-form-item class="phoneNumber2 passwordBox" label="" prop="codeInfo.possWord" borderBottom
							ref="item1">
							<u-input :password="!passShow" v-model="model1.codeInfo.possWord" placeholder="请输入密码"
								style="flex: 1;"></u-input>
							<div class="eyeBox">
								<up-icon name="eye-fill" size="22" v-if="passShow"
									@click="passShow = !passShow"></up-icon>
								<up-icon name="eye-off" size="22" v-else @click="passShow = !passShow"></up-icon>
							</div>
						</up-form-item>
					</up-form>
					<u-button style="margin-top: 30rpx;" type="" text="登录" @click="codeFromLogin"
						:loading="codeFromLoginLoading" :loadingText="'登录'"></u-button>
					<div class="textBtn">
						<span @click="forgetJump(true)">忘记密码?</span>
						<!-- <span class="forget" @click="forgetJump(false)">新用户注册</span> -->
					</div>
				</div>
			</view>
			<!-- <div class="logBtn WeChat">
					<u-button type="" text="WeChat" @click="WeChatLogin">
						<image src="@/static/images/WeChat.png" alt="WeChat" class="iconWeChat" />
						<span>WeChat</span>
					</u-button>
				</div>
				<div class="otherLogBtn">
					<span @click="handother">Login with another methods ></span>
				</div> -->
			<div class="footer">
				<div class="btnList">
					<div class="btnItem">
						<image src="@/static/images/WeChat.png" @click="WeChatLogin" alt="" />
						<p>微信登录</p>
					</div>
					<div class="btnItem" v-if="networkType !== 'wifi'" @click="shortcut">
						<image src="@/static/images/kjdl.png" alt="" />
						<p>一键登录</p>
					</div>
					<div class="btnItem" @click="numEm">
						<image src="@/static/images/yzm.png" alt="" />
						<p>验证码登录</p>
					</div>
					<div class="btnItem" @click="accountLogin">
						<image src="@/static/images/yj.png" alt="" />
						<p>账号登录</p>
					</div>
				</div>
				<div class="textBox">
					<span class="head">我已阅读并同意<span class="head2" @click="toAgreement">《用户协议》</span>和<span class="head2"
							@click="toPolicy">《隐私政策》</span></span>
					<span class="head">未注册的手机号将自动创建大漂亮潮玩账号</span>
					<u-checkbox-group placement="column" v-model="checkbox" @change="handChange">
						<u-checkbox name="1" activeColor="#de868f">
						</u-checkbox>
					</u-checkbox-group>
				</div>
			</div>
		</view>
		<!-- <up-modal :show="modalShow" :title="modalTitle" :showConfirmButton="false">
			<div class="modalText">
				<image src="@/static/images/logo.png" alt="" />
				<div class="text">
					<span>{{ modalText1 }}</span>
				</div>
				<u-button style="margin-top: 30rpx;" type="" text="确认" @click="modalShow = false"></u-button>
			</div>
		</up-modal> -->
		<upModal :modalShow="modalShow" :modalTitle="modalTitle" :modalText1="modalText1" :showImage="showImage"
			:textCancel="textCancel" :isCancel="isCancel" :isAgreement="isAgreement" :isAgreement2="isAgreement2"
			:cloosBtnText="'已阅读并同意'" @cancel="cancel" @cloos="cloos"></upModal>
	</view>
</template>

<script>
import { getPhoneCode, getEmailCode, emailCodeLogin, wechatLogin, phoneCodeLogin, fastLogin, accountAndPwd } from '@/api/login'
import upModal from '../../components/upModal.vue';
// import plus from '@dcloudio/uni-app';
export default {
	data() {
		return {
			phoneNumber: '',
			checkbox: [],
			networkType: '',// 网络类型
			subsectionList: ['手机', '邮箱'],
			subsectionCurrent: 0,
			model1: {
				userInfo: {
					number: '',
					sendCode: '',
				},
				codeInfo: {
					number: '',
					possWord: '',
				},
			},
			rules: {
				'userInfo.number': [
					{
						required: true,
						message: '手机号不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value); // 使用uView内置手机号校验
						},
						message: '手机号格式不正确',
						trigger: ['blur', 'change']
					}
				],
				'userInfo.email': [
					{
						required: true,
						message: '邮箱不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.email(value); // 使用uView内置邮箱校验
						},
						message: '邮箱格式不正确',
						trigger: ['blur', 'change']
					}
				],
				'userInfo.sendCode': {
					type: 'string',
					required: true,
					message: '请输入验证码',
					trigger: ['blur', 'change']
				},
				'codeInfo.number': [
					{
						required: true,
						message: '账号不能为空',
						trigger: ['blur', 'change']
					},
				],
				'codeInfo.possWord': [
					{
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					},
				],
			},
			isDisabled: false,
			buttonText: '发送验证码',
			oneClickLoginShow: false,
			numberLoginShow: false,
			accountLoginShow: true,
			phoneLoginLoading: false,
			phoneFromLoginLoading: false,
			SendCodeLoading: false,
			codeFromLoginLoading: false,
			passShow: false,
			isAgreement: false,// 是否用户协议内容
			isAgreement2: false,// 是否用户协议内容2
			modalShow: false,// 弹窗显示状态
			showImage: true,// 是否显示图片
			isCancel: false,// 是否有取消按钮
			modalTitle: '',// 弹窗标题
			modalText1: '',// 弹窗内容
			textCancel: '不同意',// 取消按钮文字
		};
	},
	components: {
		upModal
	},

	methods: {
		shortcut() {
			this.oneClickLoginShow = true
			this.numberLoginShow = false
			this.accountLoginShow = false
		},
		numEm() {
			this.oneClickLoginShow = false
			this.numberLoginShow = true
			this.accountLoginShow = false
		},
		accountLogin() {
			this.oneClickLoginShow = false
			this.numberLoginShow = false
			this.accountLoginShow = true
		},
		// 打开用户协议和隐私政策页面
		toAgreement() {
			uni.navigateTo({
				url: '/pages/agreementBook/agreement',
			})
		},
		toPolicy() {
			uni.navigateTo({
				url: '/pages/agreementBook/policy',
			})
		},
		phoneLogin() {// 手机号一键登录
			if (this.checkbox.length === 0) {
				uni.showToast({
					title: '请先勾选同意用户协议和隐私政策',
					duration: 2000,
					type: "default",
					icon: "none",
				});
			} else {
				console.log('1键登录');
				uni.showToast({
					title: `1键登录`,
					duration: 2000,
					type: "default",
					icon: "none",
				});
				var that = this
				//获取手机号码
				uni.login({
					provider: 'univerify',
					univerifyStyle: { // 自定义登录框样式
						//参考`univerifyStyle 数据结构`
						"fullScreen": true, // 是否全屏显示，默认值： false
						"title": '快速登录',
						"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
						// "icon": {
						// 	"path": "" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
						// },
						"phoneNum": {
							"color": "#000000", // 手机号文字颜色 默认值：#000000
							"fontSize": "18" // 手机号字体大小 默认值：18
						},
						"slogan": {
							"color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
							"fontSize": "12" // slogan 字体大小 默认值：12
						},
						// 一键登录
						"authButton": {
							"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
							"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
							"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
							"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
							"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
						},
						// 其他登录方式
						"otherLoginButton": {
							"visible": "true", // 是否显示其他登录按钮，默认值：true
							"normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
							"highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
							"textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
							"title": "其他方式登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
							"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
							"borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
						},
						"privacyTerms": {
							"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
							"textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
							"termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
							"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
							"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
							"fontSize": "12", // 字体大小 默认值：12,
							"privacyItems": [
								// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
								{
									"url": "http://47.119.43.199/html2/privacyPolicy.html", // 点击跳转的协议详情页面
									"title": "大漂亮潮玩APP隐私政策" // 协议名称
								},
								{
									"url": "http://47.119.43.199/html2/userAgreement.html", // 点击跳转的协议详情页面
									"title": "大漂亮潮玩APP用户服务协议" // 协议名称
								},
							]
						}
					},
					success(res) { // 登录成功
						console.error("登录成功：==res===", res)
						// 在得到access_token后，通过callfunction调用云函数
						uniCloud.callFunction({
							name: 'dpllogin', // 云函数名称
							data: { //传给云函数的参数
								'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
								'openid': res.authResult.openid // 客户端一键登录接口返回的openid
							},
							success(callRes) { // 一键登录  这里拿到了手机号
								console.error("登录成功：==获取手机号===", callRes)
								that.phoneNumber = callRes.result.phoneNumber //获取到的手机号
								let para = {
									phone: callRes.result.phoneNumber,
									// token: callRes.requestId
								}
								fastLogin(para).then((res) => {
									console.log('登录', res);

									if (res.code === 200) {
										let loginData = {
											token: res.data.tokenList.accessToken,
											user: res.data.user,
										}
										this.sendAndLoginData(loginData)
										uni.switchTab({
											url: '/pages/index/index'
										})
									} else {

									}
								})
							},
							fail(callErr) {
								console.log('调用云函数出错' + callErr)
								uni.closeAuthView()
							},
							complete() {
								uni.closeAuthView() //关闭授权登录界面
							}
						})
					},
					fail(err) {
						console.log('error====', err);
						uni.closeAuthView() //关闭授权登录界面
					}
				})
			}
		},
		// 验证码登录
		phoneFromLogin() {
			if (this.checkbox.length === 0) {
				uni.showToast({
					title: '请先勾选同意用户协议和隐私政策',
					duration: 2000,
					type: "default",
					icon: "none",
				});
			} else {
				this.$refs.form1.validate().then(valid => {
					if (valid) {
						this.phoneFromLoginLoading = true
						if (this.subsectionCurrent === 0) {
							let para = {
								phone: this.model1.userInfo.number,
								msg: this.model1.userInfo.sendCode
							}
							phoneCodeLogin(para).then(res => {
								// console.log("🚀 ~~ res:", res)
								if (res.code === 200) {
									let loginData = {
										token: res.data.tokenList.accessToken,
										user: res.data.user,
									}
									this.sendAndLoginData(loginData)
									uni.switchTab({
										url: '/pages/index/index'
									})
									// this.model1.userInfo.number = ''
									// this.model1.userInfo.sendCode = ''
								} else {
									uni.showToast({
										title: `错误！${res.msg}`,
										duration: 2000,
										type: "default",
										icon: "none",
									});
								}
							}).finally(() => {
								this.phoneFromLoginLoading = false
							})
						} else {
							let para = {
								email: this.model1.userInfo.email,
								msg: this.model1.userInfo.sendCode
							}
							emailCodeLogin(para).then(res => {
								// console.log("🚀 ~~ res:", res)
								if (res.code === 200) {
									let loginData = {
										token: res.data.tokenList.accessToken,
										user: res.data.user,
									}
									this.sendAndLoginData(loginData)
									uni.switchTab({
										url: '/pages/index/index'
									})
									// this.model1.userInfo.email = ''
									// this.model1.userInfo.sendCode = ''
								} else {
									uni.showToast({
										title: `错误！${res.msg}`,
										duration: 2000,
										type: "default",
										icon: "none",
									});
								}
							}).finally(() => {
								this.phoneFromLoginLoading = false
							})
						}
					} else { }
				})
			}
		},
		// 存储登录信息
		sendAndLoginData(data) {
			if (data) {
				uni.setStorageSync('token', data.token)
				uni.setStorageSync('avatarUrl', data.user.avatarUrl)
				uni.setStorageSync('username', data.user.username)
				uni.setStorageSync('userCode', data.user.userCode)
				uni.setStorageSync('dplID', data.user.dplID)
			}
			// 存储token:uni.setStorageSync('token', res.data.result);
			// 获取token:uni.getStorageSync('token');
			// 清除token：uni.setStorageSync('token', '');
		},
		useEmail() {
			this.subsectionCurrent = 1
		},
		usePhome() {
			this.subsectionCurrent = 0
		},
		// 微信一键登录
		async WeChatLogin() {
			if (this.checkbox.length === 0) {
				uni.showToast({
					title: '请先勾选同意用户协议和隐私政策',
					duration: 2000,
					type: "default",
					icon: "none",
				});
				return;
			}
			let loginResult = await uni.login({
				provider: 'weixin',
				onlyAuthorize: true
			});
			if (loginResult.errMsg !== 'login:ok') {
				uni.showToast({
					title: '登录失败！请重试',
					duration: 2000,
					type: "default",
					icon: "none",
				});
				return
			};
			if (loginResult.code) {
				wechatLogin({ wxcode: loginResult.code }).then(res => {
					console.log("🚀 ~ res:", res)
					if (res.code == 200) {
						let loginData = {
							token: res.data.tokenList.accessToken,
							user: res.data.user,
						}
						this.sendAndLoginData(loginData)
						// uni.showToast({
						// 	title: '登录成功',
						// 	duration: 2000,
						// 	type: "default",
						// 	icon: "none",
						// });
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						// uni.showToast({
						// 	title: `错误！${res.msg}`,
						// 	duration: 2000,
						// 	type: "default",
						// 	icon: "none",
						// });
					}
				});
			}
		},
		handother() {

		},
		// 保持登录
		stayLogged(tokenData) {
			// uni.setStorageSync('isLogin', true);
		},
		formatPhoneNumber(phone) {
			if (phone && phone.length >= 11) {
				return phone.slice(0, 3) + '****' + phone.slice(7);
			} else {
				return phone;
			}
		},
		handChange(n) {
			// console.log('change', n, this.checkbox);
		},
		// 获取网络状态
		getNetworkType() {
			uni.getNetworkType({
				success: (res) => {
					this.networkType = res.networkType; // 初始化网络状态
					// console.log(`当前网络状态：${this.networkType}`);
					if (this.networkType !== 'wifi') {
						this.oneClickLoginShow = true
						this.numberLoginShow = false
						this.accountLoginShow = false
						// uni.showToast({
						// 	title: '当前非WiFi环境，请注意流量消耗',
						// 	icon: 'none'
						// });
					} else {
						this.oneClickLoginShow = false
						this.numberLoginShow = true
						this.accountLoginShow = false
					}
				}
			});
		},
		handlePhoneInput() { },
		// 获取验证码按钮
		handSendCode() {
			if (this.isDisabled) return;
			this.SendCodeLoading = true;
			let para = {
				phone: this.model1.userInfo.number
			}
			if (this.subsectionCurrent === 0) {
				para.phone = this.model1.userInfo.number
				const phoneReg = /^1[3-9]\d{9}$/
				if (!this.model1.userInfo.number) {
					uni.showToast({
						title: '请输入手机号',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				if (!phoneReg.test(this.model1.userInfo.number)) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						type: "default",
						icon: "none",
					});
					return
				}
				getPhoneCode({ phone: this.model1.userInfo.number }).then(res => {
					if (res.code === 200) {
						// uni.showToast({
						// 	title: '验证码已发送',
						// 	duration: 2000,
						// 	type: "default",
						// 	icon: "none",
						// });
						this.isDisabled = true;
						this.buttonText = '60s';
						this.countdown = 60;
						const intervalId = setInterval(() => {
							if (this.countdown <= 0) {
								clearInterval(intervalId); // 清除定时器
								this.isDisabled = false;
								this.buttonText = '发送验证码';
							} else {
								this.countdown -= 1;
								this.buttonText = `${this.countdown}s`;
							}
						}, 1000);
					} else {
						uni.showToast({
							title: `错误！${err.msg}`,
							duration: 2000,
							type: "default",
							icon: "none",
						});
					}
				}).catch(err => {

				}).finally(() => {
					this.SendCodeLoading = false
				})
			} else if (this.subsectionCurrent === 1) {
				para.phone = this.model1.userInfo.email
				const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
				if (!this.model1.userInfo.email) {
					uni.showToast({
						title: '请输入邮箱',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				if (!emailReg.test(this.model1.userInfo.email)) {
					uni.showToast({
						title: '请输入正确的邮箱',
						duration: 2000,
						type: "default",
						icon: "none",
					});
					return;
				}
				getEmailCode(this.model1.userInfo.email).then(res => {
					if (res.code === 200) {
						// uni.showToast({
						// 	title: '验证码已发送',
						// 	duration: 2000,
						// 	type: "default",
						// 	icon: "none",
						// });
						this.isDisabled = true;
						this.buttonText = '60s';
						this.countdown = 60;
						const intervalId = setInterval(() => {
							if (this.countdown <= 0) {
								clearInterval(intervalId); // 清除定时器
								this.isDisabled = false;
								this.buttonText = '发送验证码';
							} else {
								this.countdown -= 1;
								this.buttonText = `${this.countdown}s`;
							}
						}, 1000);
					} else {
						uni.showToast({
							title: `错误！${err.msg}`,
							duration: 2000,
							type: "default",
							icon: "none",
						});
					}
				}).catch(err => {

				}).finally(() => {
					this.SendCodeLoading = false
				})
			}
		},
		sectionChange(index) {
			this.subsectionCurrent = index;
			if (index === 0) {
				this.model1.userInfo.email = '';
			} else {
				this.model1.userInfo.number = '';
			}
		},
		cancel() {
			if (this.isAgreement) {
				this.isAgreement = false
				this.isAgreement2 = true
				this.textCancel = '不同意并退出'
				return
			} else if (this.isAgreement2) {
				this.modalShow = false
				// 退出应用
				uni.getSystemInfo({
					success: function (res) {
						// 判断为安卓的手机
						if (res.platform == 'android') {
							// 安卓退出app
							plus.runtime.quit();
						} else {
							// 判断为ios的手机，退出App
							plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
						}
					}
				});
			}
		},
		cloos() {
			if (this.isAgreement || this.isAgreement2) {
				this.checkbox.push('1')
			}
			this.modalShow = false
		},
		// 账号密码登录按钮
		codeFromLogin() {
			if (this.checkbox.length === 0) {
				uni.showToast({
					title: '请先勾选同意用户协议和隐私政策',
					duration: 2000,
					type: "default",
					icon: "none",
				});
			} else {
				this.$refs.form1.validate().then(valid => {
					if (valid) {
						let para = {
							account: this.model1.codeInfo.number,
							password: this.model1.codeInfo.possWord,
							password2: this.model1.codeInfo.possWord,
						}
						this.codeFromLoginLoading = true
						accountAndPwd(para).then((res) => {
							if (res.code == 200) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.showToast({
									title: `错误!${res.msg}`,
									duration: 2000,
									type: "default",
									icon: "none",
								})
							}
						}).finally(() => {
							this.codeFromLoginLoading = false
						})
					} else { }
				})
			}
		},
		forgetJump(data) {
			if (data) {
				uni.navigateTo({
					url: `/pages/login/ForgotPassword?forget=忘记密码`,
				})
			} else {
				uni.navigateTo({
					url: `/pages/login/ForgotPassword?forget=新用户注册`,
				})
			}
		},
	},
	onShow() {

	},
	onLoad() {
		if (!uni.getStorageSync("firstTime")) {// 监听是否首次打开app
			uni.setStorageSync("firstTime", '1');
			this.modalShow = true;
			this.showImage = false;
			this.isAgreement = true;
			this.isCancel = true;
			this.modalTitle = '用户协议和隐私政策';
		}
		this.getNetworkType()

		// #ifndef H5
		// 导入Java类。Networklnterface类表示一个由名称和分配给此接口的IP地址列表组成的网络接口
		// const net = plus.android.importClass('java.net.NetworkInterface');
		// // 搜索具有指定名称的网络接口
		// const wlan0 = net.getByName('wlan0');
		// // 获得网卡的硬件地址
		// const macByte = wlan0.getHardwareAddress();
		// let macStr = '';
		// //转换MAC地址的思路来自网上
		// macByte.forEach(item => {
		// 	// .toString(16)数字以十六进制值显示
		// 	let temp = '';
		// 	if (item < 0) temp = (256 + item).toString(16);
		// 	else temp = item.toString(16);
		// 	if (temp.length == 1) temp = `0${temp}`;
		// 	macStr += temp;
		// });
		// let MAC = macStr.toUpperCase();
		// for (let i = 2; i < MAC.length; i += 3) MAC = MAC.slice(0, i) + ':' + MAC.slice(i);
		// console.log('MAC: ' + MAC);

		// uni.preLogin({
		// 	provider: 'univerify',
		// 	success() {  //预登录成功
		// 		console.log('预登录成功');
		// 		uni.showToast({
		// 			title: '预登录成功',
		// 			duration: 2000,
		// 			type: "default",
		// 			icon: "none",
		// 		});
		// 	},
		// 	fail(res) {  // 预登录失败
		// 		// 不显示一键登录选项（或置灰）
		// 		// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
		// 		console.log('预登录失败', res.errCode)
		// 		console.log('预登录失败', res.errMsg)
		// 		uni.showToast({
		// 			title: `预登录失败${res.errMsg}`,
		// 			duration: 2000,
		// 			type: "default",
		// 			icon: "none",
		// 		});
		// 	}
		// })
		// #endif
	},
}
</script>

<style lang="scss">
.loginBody {
	width: 100%;
	height: 100vh;
	background-size: cover;
	/* 或者使用 100% 100% */
	background-position: center;
	/* 确保图片居中 */
	position: relative;
	background: url('https://t.tutu.to/img/Ikwie') no-repeat center center;
	background-size: 100% 100%;

	.logo {
		text-align: center;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.form {
		.phoneNumber {
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: center;
			gap: 10rpx;

			span {
				display: inline-block;
			}

			.u-tag-wrapper {
				.u-tag {
					font-weight: 600;
					height: 22px;
				}
			}
		}

		.logBtn {
			margin: 0 auto;
			margin-top: 36rpx;
			width: 82%;
			text-align: center;

			.u-button {
				color: #fff;
				height: 80rpx;
				font-weight: 600;
				border-radius: 10px;
				background-color: #de868f;
				border: 1px solid #bbbbbb;
			}

		}

		.WeChat {
			.u-button {
				font-weight: 500;
				color: #000;
				background-color: #f4f4f4;
			}

			.iconWeChat {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.otherLogBtn {
			width: 100%;
			text-align: center;
			margin-top: 40rpx;
			color: #636363;
			font-size: 28rpx;
		}

		.Captcha {
			width: 100%;

			.up {
				width: 50%;
				margin: 0 auto;
			}

			.phoneFrom {
				width: 85%;
				margin: 0 auto;

				.phoneNumber1 {
					.u-input {
						background-color: #F2F2F2;
					}

					.u-input--radius {
						border-radius: 15px;
					}
				}

				.sendCode1 {
					.u-input {
						background-color: #F2F2F2;
					}

					.u-input--radius {
						border-radius: 15px 0 0 15px;
					}

					.u-button {
						border-radius: 0 15px 15px 0;
					}
				}

				.logBtn {
					margin: 0 auto;
					margin-top: 28rpx;
					width: 100%;
					text-align: center;

					.u-button {
						margin-bottom: 20rpx;
						color: #fff;
						height: 80rpx;
						font-weight: 600;
						border-radius: 10px;
						background-color: #de868f;
						border: 1px solid #bbbbbb;
					}

					.btn2 {
						.u-button {
							background-color: #BEBEBE;
						}
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 50rpx;

		.textBox {
			margin-top: 50rpx;
			text-align: center;
			font-size: 24rpx;
			position: relative;

			.head {
				color: #8b8b8b;
				margin-bottom: 10rpx;

				.head2 {
					color: #000000;
				}
			}

			// .agreement {
			// 	width: 70%;
			// 	// margin: 0 auto;

			// 	span {
			// 		color: #bebebe;
			// 		display: inline;
			// 	}
			// }

			span {
				display: inline-block;
			}

			.u-checkbox {
				position: absolute;
				left: 0;
				bottom: 37%;
				left: 8%;
			}
		}

		.btnList {
			width: 100%;
			display: flex;

			.btnItem {
				// width: 25%;
				text-align: center;
				flex-grow: 1;

				p {
					color: #9A9A9A;
					font-size: 24rpx;
				}
			}

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.back {
		width: 100%;
		position: fixed;
		top: 280rpx;
	}

	.account {
		width: 85%;
		margin: 0 auto;

		.phoneNumber2 {
			.u-input {
				width: 100%;
				background-color: #F2F2F2;
			}

			.u-input--radius {
				border-radius: 15px;
			}

			::v-deep .u-form-item__body__right__content__slot {
				width: 100%;
			}
		}

		.passwordBox {
			position: relative;

			.eyeBox {
				position: absolute;
				right: 20rpx;
			}
		}

		.u-button {
			color: #fff;
			height: 80rpx;
			font-weight: 600;
			border-radius: 10px;
			background-color: #de868f;
			border: 1px solid #bbbbbb;
		}

		.textBtn {
			margin-top: 24rpx;
			font-size: 14px;
			text-align: center;

			.forget {
				float: right;
			}
		}
	}

	// background-image: $loginBg;
}
</style>